<template>
  <div class="serve-item">
    <div class="reg-main"
         @click="$router.push('/herdetails')">
      <div class="reg-main-item">
        <div class="x">
          <div class="reg-main-item-l">
            <img :src="servicers.img.icon"
                 alt="">
          </div>
          <div class="reg-main-item-r">
            <div class="user">
              <span>{{servicers.name}}</span>
              <span class="money">{{servicers.salary}}</span>
            </div>
            <div class="label">
              <!-- <span v-for="(item, index) in servicers.label" :key="index">{{item}}</span> -->
              <van-tag round
                       plain
                       color="#1196db"
                       v-for="(item, index) in servicers.label"
                       :key="index">{{item}}</van-tag>
            </div>
            <p>
              <span>{{servicers.address}}&nbsp;|&nbsp;</span>
              <span>{{servicers.age}}&nbsp;|&nbsp;</span>
              <span>服务{{servicers.ser_num}}户&nbsp;|&nbsp;</span>
              <span>评价{{servicers.appraise}}条</span>
            </p>
          </div>
        </div>
        <!-- <div class="btom">
            <div class="reg-transtion">
              <i class="jiazheng icon-biaodiandidian"></i>
              <span>22.68km</span>
            </div>
            <p>湖南省长沙市天心区暮云工业园开服曼城住宅...</p>
          </div> -->
      </div>
      <!-- more -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'serveItem',
  props: {
    servicers: {
      type: [Object, Array],
      required: true
    }
  }
}
</script>
<style lang="less" scope>
.serve-item {
  .reg-main {
    .reg-main-item {
      // display: flex;
      border-top: 4px solid #f0eeee;
      padding: 24px 0;
      .x {
        display: flex;
        .reg-main-item-l {
          margin-right: 20px;
          width: 160px;
          height: 172px;
          background-color: pink;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .reg-main-item-r {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          // box-sizing: border-box;
          flex: 1;
          .user {
            display: flex;
            justify-content: space-between;
            margin-top: 0;
            color: rgba(0, 0, 0, 1);
            font-size: 28px;
            font-family: PingFangSC-bold;
            .money {
              color: #979191;
            }
          }
          p {
            margin: 0;
            color: rgba(151, 145, 145, 100);
            font-size: 24px;
            font-family: PingFangSC-regular;
          }
          .label {
            height: 46px;
            line-height: 46px;
            // background-color: pink;
            font-size: 20px;
            color: #3f51b5;
            .van-tag {
              margin-right: 10px;
              display: inline-block;
              // background-color: red;
              border-radius: 46px;
              // border: 1px solid #3F51B5;
              padding: 10px;
            }
          }
        }
      }
      // .btom {
      //   display: flex;
      //   justify-content: center;
      //   align-items: center;
      //   font-size: 24px;
      //   margin-top: 20px;
      //   height: 34px;
      //   line-height: 34px;
      //   color: #979191;
      //   .reg-transtion {
      //     display: flex;
      //     width: 160px;
      //     margin-right: 20px;
      //     i {
      //       padding-right: 14px;
      //       color: #979191;
      //       font-size: 36px;
      //     }
      //   }
      //   p {
      //     flex: 1;
      //   }
      // }
    }
  }
}
</style>
